<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素的删除和插入操作</title>
		<!-- 元素的删除和插入操作：针对 元素 增删改 
		 append()     功能：在匹配元素集合中所有元素内部末尾插入内容
		 prepend()    功能：在匹配元素集合中所有元素的内部开头插入内容
		 
		 after()     功能：在匹配元素集合中所有元素外部末尾插入内容
		 before()    功能：在匹配元素集合中所有元素的外部开头插入内容
		 
		 remove()    功能：使用前提：元素内容，删除元素
		 empty()     功能：使用前提：元素内容，清空元素
		 
		 replacewith()
		 -->
		 	<style>
		 		button{
		 			border:2px solid greenyellow;
		 			padding: 8px 15px;
		 			cursor: pointer;
		 		}
		 		#target{
		 			margin-top: 10px;
		 			border: 3px solid orange;
		 			padding: 10px;
		 			border-radius: 1%;
		 		}
				.buy{
					display: block;
				    width:200px;
					height:200px;
				    background: #e4393c;
					color: #e4393c;
				    border-radius:50%;
					background-image:url(../img/LOGO.png);
					
				}
		 	</style>
			<script src="../js/jquery-1.11.1.js"></script>
	</head>
	
	<body>
		<!-- 7个按钮 div套p div套p-->
		<button id="appendBtn">内部末尾插入</button>
		<button id="prependBtn">内部开头插入</button>
		<button id="afterBtn">外部的后面插入</button>
		<button id="beforeBtn">外部的前面插入</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replacewithBtn">替换元素</button>
		<!-- 1.目标显示位置 -->
		<div id="target">
			<p>目标元素的默认段落</p>
		</div>
		<!-- 2.替换和插入的元素块区域 -->
		<div id="newElement" style="display: none;">
			<p>这是插入和替换的元素块段落</p>
		</div>
		<script>
			/* 1.点击 内部末尾插入 按钮 实现 选框末尾插入新元素 */
			$("#appendBtn").click(function(){
				//插入新元素---1.1创建新元素--复制新元素 clone
				//根据抓到新元素--复制出 新元素--包含原有属性和样式
				var nw=$("#newElement").clone();
				//1.2复制div加p空间元素，含原有属性--显示 display：block
				nw.css("display","block");
				//1.3 复制新元素并且改变属性
				$("#target").append(nw);
			});
			/* 2.点击 内部开头插入 按钮 实现 选框末尾插入新元素 */
			$("#prependBtn").click(function(){
				var nw=$("#newElement").clone();
				nw.css("display","block");
				$("#target").prepend(nw);
			});
			/* 3.点击 内部末尾插入 按钮 实现 选框末尾插入新元素 */
			$("#afterBtn").click(function(){
				var nw=$("#newElement").clone();
				nw.css("display","block");
				$("#target").after(nw);
			});
			/* 4.点击 内部末尾插入 按钮 实现 选框末尾插入新元素 */
			$("#beforeBtn").click(function(){
				//插入新元素---1.1创建新元素--复制新元素 clone
				//根据抓到新元素--复制出 新元素--包含原有属性和样式
				var nw=$("#newElement").clone();
				//1.2复制div加p空间元素，含原有属性--显示 display：block
				nw.addClass("buy")
				//1.3 复制新元素并且改变属性
				$("#target").before(nw);
			});
		    /* 5.点击 删除和清空元素 按钮：真实删除元素，清空元素*/
			$("#removeBtn").click(function(){
				$("#target").remove();
			});
			$("#emptyBtn").click(function(){
				$("#target").empty();
			});
		    /* 6.点击 替换元素 按钮 将当前效果替换为新效果*/
		    $("#replaceWithBtn").click(function(){
				var c=$("#newElement").clone().css("display","block");
				$("#target").replaceWith(c);
			});
		</script>
	</body>
</html>